<template>
  <div id="app">
    <form action="">
      <div>
        <span>姓名: </span>
        <input type="text" v-model="name" />
      </div>
      <div>
        <span>年龄: </span>
        <input type="number" v-model="age" />
      </div>
      <div>
        <span>身高: </span>
        <input type="number" v-model="height" />
        <span>(米)</span>
      </div>
      <div>
        <span>体重: </span>
        <input type="number" v-model="weight" />
        <span>(公斤)</span>
      </div>
      <div>
        <span>病史: </span>
        <input type="text" v-model="history" />
      </div>
    </form>
    <button @click="diagnose">诊断</button>
    <div v-if="BMI">患者{{ name }}的诊断结果：{{ res }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: 0,
      height: 0,
      weight: 0,
      history: "",
      BMI: 0,
      res: "",
    };
  },
  methods: {
    diagnose() {
      if (this.name.trim() === '') return alert('请填写患者姓名')
      if (!this.age) return alert('请填写患者年龄')
      if (!this.height) return alert('请填写患者身高')
      if (!this.weight) return alert('请填写患者体重')

      this.BMI = this.weight / this.height / this.height;
      // console.log("bmi", this.BMI);
      if (this.BMI <= 18.5) this.res = "体重过轻";
      else if (this.BMI <= 24.9) this.res = "正常";
      else if (this.BMI <= 29.9) this.res = "体重过重";
      else this.res = "肥胖";
    },
  },
};
</script>

<style>
div {
  margin-bottom: 20px;
}
</style>
